<template>
  <div>
    <div v-if=" tableData.length == 0 ">
      <div>目前没有作业记录。。。</div>
    </div>
    <div v-else>
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="20">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column fixed prop="index" label="序号" width="80" align="center" sortable></el-table-column>
            <!-- <el-table-column prop="stuid" label="学号" width="150" align="center"></el-table-column> -->
            <el-table-column prop="hwname" label="文件名称" min-width="120" align="center" sortable></el-table-column>
            <el-table-column prop="date" label="上传时间" width="280" align="center" sortable>
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="文件大小" width="120" align="center">
              <template slot-scope="scope">
                <i class="el-icon-document"></i>
                <span style="margin-left: 10px">{{ conver(scope.row.size) }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="hwpath" label="文件路径" min-width="120" align="center"></el-table-column> -->

            <el-table-column fixed="right" label="操作" width="150" align="center">
              <template slot-scope="scope">
                <!-- <el-button @click="handleClick(scope.row)"  size="small">查看</el-button>   -->
                <!-- <el-button type="text" size="small">下载</el-button> -->
                <el-button size="mini" @click="handleDownload(scope.$index, scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HomeworkList",
  data() {
    return {
      homeworklist: [],
      tableData: [
        {
          index: 1,
          stuid: 1610252430,
          hwname: "作业1",
          date: "2016-05-02 14：25：33",
          size: 16544131,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 2,
          stuid: 1610252430,
          hwname: "作业2",
          date: "2016-05-02 14：25：33",
          size: 1545497123,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 3,
          stuid: 1610252430,
          hwname: "作业3",
          date: "2016-05-02 14：25：33",
          size: 2048,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 4,
          stuid: 1610252430,
          hwname: "作业4",
          date: "2016-05-02 14：25：33",
          size: 1024,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 1,
          stuid: 1610252430,
          hwname: "作业1",
          date: "2016-05-02",
          size: 55154841,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 1,
          stuid: 1610252430,
          hwname: "作业1",
          date: "2016-05-02",
          size: 16544131,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 2,
          stuid: 1610252430,
          hwname: "作业2",
          date: "2016-05-02",
          size: 1545497123,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 3,
          stuid: 1610252430,
          hwname: "作业3",
          date: "2016-05-02",
          size: 2048,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 4,
          stuid: 1610252430,
          hwname: "作业4",
          date: "2016-05-02",
          size: 1024,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 1,
          stuid: 1610252430,
          hwname: "作业1",
          date: "2016-05-02",
          size: 55154841,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 1,
          stuid: 1610252430,
          hwname: "作业1",
          date: "2016-05-02",
          size: 16544131,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 2,
          stuid: 1610252430,
          hwname: "作业2",
          date: "2016-05-02",
          size: 1545497123,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 3,
          stuid: 1610252430,
          hwname: "作业3",
          date: "2016-05-02",
          size: 2048,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 4,
          stuid: 1610252430,
          hwname: "作业4",
          date: "2016-05-02",
          size: 1024,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 1,
          stuid: 1610252430,
          hwname: "作业1",
          date: "2016-05-02",
          size: 55154841,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 1,
          stuid: 1610252430,
          hwname: "作业1",
          date: "2016-05-02",
          size: 16544131,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 2,
          stuid: 1610252430,
          hwname: "作业2",
          date: "2016-05-02",
          size: 1545497123,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 3,
          stuid: 1610252430,
          hwname: "作业3",
          date: "2016-05-02",
          size: 2048,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 4,
          stuid: 1610252430,
          hwname: "作业4",
          date: "2016-05-02",
          size: 1024,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        },
        {
          index: 1,
          stuid: 1610252430,
          hwname: "作业1",
          date: "2016-05-02",
          size: 55154841,
          hwpath: "D:WorkSpaceclassroomManagementSystemCMScms3public"
        }
      ]
    };
  },
  methods: {
    handleDownload(index, row) {
      console.log(index, row);
    },
    //JS 大小转化B KB MB GB的转化方法
    conver(limit) {
      var size = "";
      if (limit < 0.1 * 1024) {
        //如果小于0.1KB转化成B
        size = limit.toFixed(2) + "B";
      } else if (limit < 0.1 * 1024 * 1024) {
        //如果小于0.1MB转化成KB
        size = (limit / 1024).toFixed(2) + "KB";
      } else if (limit < 0.1 * 1024 * 1024 * 1024) {
        //如果小于0.1GB转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + "MB";
      } else {
        //其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }

      var sizestr = size + "";
      var len = sizestr.indexOf(".");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    }
  },
  mounted() {
    axios
      .get("/homeworklist", {
        params: {
          // ID: 12345
        }
      })
      .then(function(response) {
        console.log(response);
        this.homeworklist = response.homeworklist;
      })
      .catch(function(error) {
        console.log(error);
      });
  }
};
</script>

<style scoped>
/* .el-table {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
} */
</style>